<template>
  <div class="app-container">
    <!-- 文件列表 -->
    <transition-group name="el-fade-in-linear" tag="ul">
      <li :key="index" class="li" v-for="(file, index) in pictureList">
        <div style="height: 600px; width: 100%">
          <img :src="file.url" v-if="file.url !== null" alt="" />
          <iframe :src="file.url" frameborder="0" scrolling="auto" style="width: 100%; height: 100%" v-if="file.url !== null" />
        </div>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { getList } from '@/api/tool/pdf'
import { getDrawingline } from '@/api/mes/md/drawingline'

export default {
  name: 'ProcessPictureView',
  props: {
    url: null,
    workorderId: null,
    processId: null
  },
  data() {
    return {
      // BOM工序图纸表格数据
      pictureList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workorderId: this.workorderId,
        repairId: this.workorderId,
        processId: this.processId
      },
      form: {},
      fileType: ['pdf']
    }
  },
  created() {
    this.getList()
  },
  watch: {
    workorderId(newValue) {
      this.queryParams.workorderId = newValue
      this.getList()
    },
    processId(newValue) {
      this.queryParams.processId = newValue
      this.getList()
    },
    url(newValue) {
      this.url = newValue
      this.getList()
    }
  },
  methods: {
    /** 查询BOM工序图纸列表 */
    getList() {
      this.pictureList = []
      getList(this.url, this.queryParams).then((response) => {
        let list = response.data
        list.forEach((item) => {
          if(item.drawingLineId){
            getDrawingline(item.drawingLineId).then((response) => {
              this.pictureList.push({ url: response.data.lineUrl, name: response.data.lineUrl })
            })
          }
        })
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        bomId: this.bomId,
        processId: this.processId,
        url: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      }
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf('/') > -1) {
        return name.slice(name.lastIndexOf('/') + 1)
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss">
.li {
  list-style-type: none;
  margin-right: 30px;
}
</style>
